<template>
  <van-swipe-cell :right-width="operatorWidth">
    <van-cell-group>
      <view
        class="MyDiscussion animate__animated animate__bounceInRight"
        @click="skipToDiscussionDetail"
      >
        <view class="top">
          <view class="title">{{ discussionDetail.title }}</view>
          <view class="time"
            >发布时间：{{
              $formatTime.formatTimeToHHMM(discussionDetail.createTime)
            }}</view
          >
          <view class="content">{{ discussionDetail.content }}</view>
        </view>
        <view class="bottom">
          <view class="categary">{{ discussionDetail.categary }}</view>
          <view class="info">
            <view class="iconBox">
              <image
                src="../../../static/icons/comment.png"
                class="icon"
              ></image>
              <text>{{ discussionDetail.commentCount }}</text>
            </view>
            <view class="iconBox">
              <image src="../../../static/icons/like.png" class="icon"></image>
              <text>{{ discussionDetail.liked }}</text>
            </view>
          </view>
        </view>
      </view>
    </van-cell-group>
    <view slot="right">
      <view
        class="rightBox"
        @click="handleDiscussion"
        :style="{ width: operatorWidth + 'px' }"
        >{{ operator }}</view
      >
    </view>
  </van-swipe-cell>
</template>

<script>
export default {
  name: "MyDiscussion",
  props: {
    discussionDetail: Object,
    operator: String,
    operatorWidth: Number,
  },
  methods: {
    // 点击跳转至讨论详情页
    skipToDiscussionDetail() {
      this.$store.commit("m_discussion/clearCurrentDiscussion");
      uni.navigateTo({
        url: `/pages/Discussion/Discussion?id=${this.discussionDetail._id}`,
      });
    },

    // 处理讨论操作
    handleDiscussion() {
      if (this.operator === "删除") {
        this.deleteDiscussion();
      } else if (this.operator === "取消收藏") {
        this.cancelCollectDiscussion();
      }
    },

    // 删除讨论内容
    async deleteDiscussion() {
      try {
        await this.$store.dispatch(
          "m_discussion/deleteUserDiscussion",
          this.discussionDetail
        );
        uni.showToast({
          title: "删除成功",
          icon: "success",
          duration: 1000,
        });
      } catch (err) {
        uni.showToast({
          title: "删除失败",
          icon: "error",
          duration: 1000,
        });
        console.log(err);
      }
    },

    // 取消收藏操作
    async cancelCollectDiscussion() {
      const discussionId = this.discussionDetail._id,
        isCollection = false;
      try {
        await this.$store.dispatch("handleCollectionDiscussion", {
          discussionId,
          isCollection,
        });
        uni.showToast({
          title: "取消收藏成功",
          icon: "success",
          duration: 1000,
        });
      } catch (err) {
        uni.showToast({
          title: "取关失败",
          icon: "error",
          duration: 1000,
        });
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.MyDiscussion {
  padding: 20rpx;
  padding-bottom: 10rpx;
  width: 100%;
  height: 220rpx;
  box-sizing: border-box;
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #aaa;
  background-color: #fff;
  .top {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000;
    }
    .time {
      margin-top: 10rpx;
      font-size: 26rpx;
    }
    .content {
      width: 100%;
      margin-top: 10rpx;
      font-size: 30rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .info {
      display: flex;
      align-items: center;

      .iconBox {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        .icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
    }
  }
}
.rightBox {
  height: 250rpx;
  line-height: 250rpx;
  text-align: center;
  font-size: 36rpx;
  background-color: #05a47d;
  color: #fff;
}
</style>
